<template>
	<view class="content">
		<scroll-view scroll-y="true" class="list" @scrolltolower="scrolltolowers">
			<view class="list-item" v-for="(item,index) in dataList" :key="index" @click="setUrl(item.cover,item.diaryId,item.diaryType)">
				<view class="list-item-lizi">
					<view class="userimg">
						<image :src="item.userAvatar" mode=""></image>
					</view>
					<view class="userData">
						<view class="item-top">
							<view class="item-top-left">{{item.userName}}</view>
						</view>
						<view class="item-bottom">
							<view style="color: #AAAAAA;font-size: 26rpx;font-weight: normal;" v-if="item.type==1">
								点赞了我的评论
								<span style="margin-left: 15rpx;font-size: 24rpx">{{item.date}}</span></view>
							<view style="color: #AAAAAA;font-size: 26rpx;font-weight: normal;" v-else>
								云吸了我的日记
								<span style="margin-left: 15rpx;font-size: 24rpx">{{item.date}}</span></view>
						</view>
						<view class="item-time">
							<span class="item-time-left"></span> <view class="item-bottom-left">{{item.content}}</view>
						</view>
					</view>
					<view class="dataImg">
						<image :src="item.cover"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	name:'giveLike',
	data() {
		return {
			page: 1,
			size: 10,
			total: 0,
			dataList: [],
			show: false
		}
	},
	props: ["Refresh"],
	watch:{
		Refresh(){
			console.log('------'+this.Refresh)
			this.page = 1
			this.show = false
			this.getData()
		}
	},
	methods:{
		setUrl(e,id,type){ 
			if(e){
				if(type == 1){
					uni.navigateTo({
						url: './../../myPackageA/diary/Detail/diaryDetail?id='+id
					})
				}else if(type == 2){
					uni.navigateTo({
						url: './../../myPackageA/diary/player/player?id='+id
					})
				}
			}else{
				uni.showToast({
					title: '该日记已经被删除',
					duration: 1500,
					icon: 'none'
				})
			}
		},
		scrolltolowers(){
			if(this.dataList.length < this.total){
				this.page += 1
				let self = this
				self.$request(self.commonApi.commentsMessage+self.page+'/'+self.size,'GET').then(res=>{
					let data = res.data.data
					data.result.forEach(item=>{
						self.dataList.push(item)
					})
				})
			}else{
				this.show = true
			}
		},
		getData(){
			let self = this
			self.$request(self.commonApi.messageLike+self.page+'/'+self.size,'GET').then(res=>{
				let data = res.data.data
				self.total = data.meta.total
				self.dataList = data.result
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.item-time-left{
		width: 3px;
		height: 16px;
		background: #F6F6F6;
		border-radius: 2px;
	}
	.item-bottom-left{
		width: 96%;
		margin-left: 10rpx;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 28rpx;
		color: #333333;
	}
.item-top-left{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	flex-direction: row;
	font-size: 28rpx;
	font-weight: bold;
}
.item-top-right{
	width: 30%;
	height: 100%;
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #AAAAAA;
}
	.item-top{
		width: 100%;
		min-height: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		margin-top: 23rpx;
	}
	.item-bottom{
		width: 100%;
		min-height: 50rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		margin-top: 10rpx;
	}
.item-time{
	width: 100%;
	height: 60rpx;
	display: flex;
	align-items: center;
	flex-direction: row;
	font-size: 28rpx;
	margin: 0rpx 0 17rpx 0;
	color: #AAAAAA;
}
.dataImg{
	width: 130rpx;
	height: 160rpx;
	display: flex;
	align-items: center;
	// justify-content: center;
	flex-direction: row-reverse;
	image{
		width: 110rpx;
		height: 110rpx;
		border-radius: 15rpx;
	}
}
.userData{
	width: calc(100% - 270rpx);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
	.userimg{
		width: 100rpx;
		height: 160rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// flex-direction: row;
		image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			// margin-right: 20rpx;
		}
	}
	.list-item-lizi{
		width: 700rpx;
		min-height: 160rpx;
		display: flex;
		// align-items: center;
		justify-content: space-between;
		flex-direction: row;
	}
.list-item{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #f2f2f2;
}
.list{
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	background: white;
}
.content {
	width: 100%;
	display: flex;
	flex-direction: column;
}
</style>
